<script lang="ts" setup>
import type { ReceiptRecordRefund } from '@/api/types/finance'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getReceiptRecordRefundById } from '@/api/finance'
import useLoading from '@/hooks/useLoading'

definePage({
  style: {
    navigationBarTitleText: '退款申请详情',
  },
})

const { loading, startLoading, endLoading } = useLoading()
const refundData = ref<ReceiptRecordRefund | null>(null)
const idValue = ref<string>('')
const flowIdValue = ref<string>('')

// 使用流程相关功能
const { currentProcess, getProcessInstance, getCurrentUserPendingTaskId, loading: flowLoading } = useFlow()

async function loadData() {
  try {
    startLoading()
    // 先获取流程实例
    await getProcessInstance(idValue.value)
    // 获取当前用户待审批任务ID
    const taskId = await getCurrentUserPendingTaskId(idValue.value)
    if (taskId) {
      flowIdValue.value = taskId
    }
    if (!currentProcess.value || !currentProcess.value.businessKey) {
      throw new Error('无法获取业务key')
    }
    const res = await getReceiptRecordRefundById(currentProcess.value.businessKey)
    refundData.value = res.data || null
  }
  catch (error) {
    console.error('获取资金退款详情失败:', error)
  }
  finally {
    endLoading()
  }
}

onLoad((options) => {
  const { id, flowId } = options
  if (flowId) {
    flowIdValue.value = flowId as string
  }
  if (id) {
    idValue.value = id as string
    loadData()
  }
  else {
    console.error('缺少退款记录ID参数')
  }
})
</script>

<template>
  <view class="page">
    <!-- 审批状态卡片 -->
    <ApprovalStatusCard :current-process="currentProcess" :id-value="idValue" />
    <view v-if="loading" class="loading-container">
      <view class="loading">
        加载中...
      </view>
    </view>
    <view v-else-if="refundData" class="detail-content">
      <view class="section">
        <view class="section-title">
          基本信息
        </view>
        <view class="info-item">
          <view class="label">
            退款单号
          </view>
          <view class="value">
            {{ refundData.refundNo || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            申请部门
          </view>
          <view class="value">
            {{ refundData.departName || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            申请人
          </view>
          <view class="value">
            {{ refundData.applicantName || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            申请时间
          </view>
          <view class="value">
            {{ refundData.applyTime || '-' }}
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">
          退款信息
        </view>
        <view class="info-item">
          <view class="label">
            退款金额
          </view>
          <view class="value amount">
            ¥{{ refundData.amount?.toFixed(2) || '0.00' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            退款原因
          </view>
          <view class="value">
            {{ refundData.refundReason || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            退款方式
          </view>
          <view class="value">
            {{ refundData.refundType || '-' }}
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">
          收款信息
        </view>
        <view class="info-item">
          <view class="label">
            收款方名称
          </view>
          <view class="value">
            {{ refundData.payeeName || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            收款银行
          </view>
          <view class="value">
            {{ refundData.payeeBank || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            银行账号
          </view>
          <view class="value">
            {{ refundData.payeeAccount || '-' }}
          </view>
        </view>
      </view>

      <view v-if="refundData.relatedBusinessInfo" class="section">
        <view class="section-title">
          关联业务信息
        </view>
        <view class="info-item">
          <view class="label">
            业务类型
          </view>
          <view class="value">
            {{ refundData.relatedBusinessInfo.businessType || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            业务单号
          </view>
          <view class="value">
            {{ refundData.relatedBusinessInfo.businessNo || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            关联金额
          </view>
          <view class="value">
            ¥{{ refundData.relatedBusinessInfo.relatedAmount?.toFixed(2) || '0.00' }}
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">
          状态信息
        </view>
        <view class="info-item">
          <view class="label">
            申请状态
          </view>
          <view class="value">
            {{ refundData.status || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">
            审批状态
          </view>
          <view class="value">
            {{ refundData.auditStatus || '-' }}
          </view>
        </view>
      </view>

      <view v-if="refundData.remark" class="section">
        <view class="section-title">
          备注
        </view>
        <view class="remark-content">
          {{ refundData.remark }}
        </view>
      </view>
    </view>
    <view v-else class="error-container">
      <view class="error-message">
        暂无数据
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.loading-container,
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  color: #999;
}

.detail-content {
  .section {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }

  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #f0f0f0;
    &:last-child {
      border-bottom: none;
    }
  }

  .label {
    font-size: 26rpx;
    color: #666;
  }

  .value {
    font-size: 26rpx;
    color: #333;
    text-align: right;
    flex: 1;
    padding-left: 30rpx;
  }

  .amount {
    color: #ff6b6b;
    font-weight: 600;
    font-size: 32rpx;
  }

  .remark-content {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
  }
}
</style>
